<template>
  <div>
    <form action="/">
      <van-search v-model="value" show-action :placeholder="placeholderValue" @search="onSearch" @cancel="onCancel" />
    </form>
    <div class="his-hot">
      <div class="hd">
        <h4>历史搜索</h4>
        <van-icon name="delete-o" @click="remove" />
      </div>
      <div class="bd">
        <van-tag plain type="default" v-for="(value, index) in historySearch" :key="index" @click="onSearch(value)">
          {{value}}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: '',
        // 历史搜索
        historySearch: [],
        placeholderValue: '输入商品名称/订单编号'
      }
    },
    created() {
      const storage = window.localStorage
      if (storage.getItem('OrderSearchWord') !== null) {
        this.historySearch = JSON.parse(storage.getItem('OrderSearchWord'))
      }
    },
    methods: {
      onSearch(val) {
        // trim() 删除搜索词前后的空格
        const word = val.trim()
        if (word !== '') {
          const storage = window.localStorage
          if (storage.getItem('OrderSearchWord') === null) {
            // unshift() 将指定元素插入数组开始位置并返回该数组
            this.historySearch.unshift(word)
            storage.setItem('OrderSearchWord', JSON.stringify(this.historySearch))
          } else {
            // indexOf() 判断历史搜索是否包含该搜索词，如果包含，返回索引值，否则返回-1
            if (this.historySearch.indexOf(word) !== -1) {
              this.historySearch.splice(this.historySearch.indexOf(word), 1)
              this.historySearch.unshift(word)
            } else {
              this.historySearch.unshift(word)
            }
            if (this.historySearch.length > 5) {
              // pop() 从数组中删除最后项,并返回该删除项
              this.historySearch.pop()
            }
            storage.setItem('OrderSearchWord', JSON.stringify(this.historySearch))
          }
          this.$router.push({
            path: '/OrderSearchItems',
            query: {
              OrderSearchWord: word
            }
          })
        } else {
          this.$dialog.alert({
            message: '请输入搜索内容'
          }).then(() => {

          })
        }
      },
      onCancel() {
        this.$router.go(-1)
      },
      remove() {
        this.$dialog.confirm({
          message: '是否清空搜索历史？'
        }).then(() => {
          const storage = window.localStorage
          storage.removeItem('OrderSearchWord')
          this.historySearch = JSON.parse(storage.getItem('OrderSearchWord'))
        }).catch(() => {

        })
      }
    }
  }
</script>

<style scoped>
  .his-hot {
    padding: 0.5rem;
  }

  .his-hot .hd {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
  }

  .his-hot .hd h4 {
    font-size: 15px;
    margin-top: 4px;
    margin-bottom: 0.5rem;
  }

  .his-hot .bd .van-tag {
    margin-right: 0.5rem;
  }
</style>
